import React, { useEffect, useRef, useState } from 'react'
import {useNavigate} from 'react-router-dom'
import './index.scss'
import { Progress } from 'antd';

export default function NotFound() {

  //自定义接口
  interface styleObj{
    left:string,
    top:string,
    background:string,
    transform:string,
    animationDelay:string

  }
  const box:any=useRef()
  const [spanNum,setSpanNum]=useState<Array<styleObj>>([])
  const spanInit=()=>{
    const width=box.current.clientWidth-10;
    const height=box.current.clientHeight-10;
    console.log(width,height);
    for(let i=0;i<=300;i++){
      //span随机高与随机宽
      let x=width * Math.random()
      let y=height * Math.random()
      //span的随机颜色
      let r=Math.random()*255
      let g=Math.random()*255
      let b=Math.random()*255
      let a=Math.random()*1
  //span的随机大小
      let scale=Math.random()*2
      //span出现动画的随机事件
      let time=Math.random()*5

      spanNum.push({
          left:x+"px",
          top:y+"px",
          background:`rgba(${r},${g},${b},${a})`,
          transform:'scale('+scale+')',
          animationDelay:time+"s"
      })
  }
  setSpanNum([...spanNum])
  }
  
  //倒计时
  let timer:any=null
  let [num,setNum]=useState<number>(0)
  const timeDown=()=>{
    timer=setInterval(()=>{
      if(num<100){
        setNum(num+=1)
      }
      else{
        clearInterval(timer)
        timer=null
        gotoWhere('/login')
      }
    },100)
  }

  //跳转
  const navigate=useNavigate()
    const gotoWhere=(url:string)=>{
        navigate(url)
    }
  //点击跳转

  

  useEffect(()=>{
    spanInit()
    timeDown()
    //跳转后销毁
    return()=>{
      clearInterval(timer)
      timer=null
    }
  },[])
  
  
  return (
    <div className='notfound' ref={box}>

        <div className='notfound_img'>
            <img src={require('../../assets/images/404.png')} alt="" />
        </div>
        {
          spanNum&&spanNum.map((item,index)=>(
            <span className='box_span' key={index} style={item}></span>
          ))
        }
       <div
       style={{cursor: 'pointer'}}
       onClick={()=>gotoWhere('/login')}
       >
            <Progress type="circle" percent={num} width={70}/>
       </div>


    </div>
  )
}
